<template>
  <div class="hieleven">
    <div class="title" :class="{ fixed: fixed }">
      <div class="back">
        <van-icon name="arrow-left" @click="$router.push('/home')" />
      </div>
      <div class="title-tabs">
        <router-link
          class="title-tab"
          :class="{ active: $route.name == 'hieleven' }"
          :to="{ name: 'hieleven' }"
          >嗨11抢先购</router-link
        >
        <router-link
          class="title-tab quanmin"
          :class="{ active: $route.name == 'peoplebuy' }"
          :to="{ name: 'peoplebuy' }"
        >
          全民抢购
        </router-link>
      </div>
    </div>
    <!-- <keep-alive> <router-view></router-view></keep-alive> -->
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </div>
</template>
<script >
import { reactive, toRefs, nextTick } from "vue";
export default {
  setup() {
    const data = reactive({
      active: 1,
      fixed: false
    });
    nextTick(() => {
      document.getElementById("app").addEventListener("scroll", () => {
        const scrollTop = document.getElementById("app").scrollTop;
        data.fixed = Math.abs(Math.round(scrollTop)) < 300 ? false : true;
      });
    });
    
    return { ...toRefs(data) };
  },
};
</script>
<style lang="scss" scoped>
.hieleven {
  background: #cdf7ed;
  img {
    display: block;
  }
  .title {
    position: fixed;
    top: 0;
    display: flex;
    width: 100%;
    height: 5rem;
    line-height: 5rem;
    z-index: 100;
  }
  .back {
    position: absolute;
    left: 2rem;
    font-size: 2rem;
  }
  .title-tabs {
    display: flex;
    margin: 0.9rem auto;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3rem;
    line-height: 3rem;
    letter-spacing: 0.4px;
    border: 0.1rem solid #aaa;
  }
  .title-tab {
    margin: 0.1rem;
    font-size: 1.4rem;
    color: #fff;
    position: relative;
    width: 10rem;
    border-radius: 3rem;
    &.active {
      color: #000;
      background: #fff;
    }
  }

  .quanmin {
    margin-left: -1rem;
  }
  .fixed {
    background: #fff;
    transition: background 0.5s cubic-bezier(0.39, 0.58, 0.57, 1);
  }
}
</style>
